*{margin:0; padding:0;}
body{
	background-color:rgb(247,238,214);
}
a{
	color:#333;
	text-decoration:none;
}
.zw{
	width:100%;
	height:75px;
}
.zwbackground{
	width:100%;
	height:70px;
	position:fixed;
	z-index:999;
	display:flex;
	box-shadow:0 -1px 5px #ccc;
	background-color:rgb(246,233,199);
}
.theNavTop{
	top:0;
}
.theNavBottom{
	bottom:0;
}
.theNav{
	width:1200px;
	height:70px;
	margin:0 auto;
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.theNav img{
	flex:1;
	width:200px;
	height:98%;
}
.theNavUl{
	flex:4;
	height:50px;
	border-radius:80px;
	border:solid .5px #bbb;
	box-sizing:border-box;
	display:flex;
	list-style-type:none;
	justify-content:space-between;
}
.theNavUl li{
	width:19%;
	margin:auto 0;
	text-align:center;
}
.theNavUl a{
	width:100%;
	display:block;
}
.box{
	width:1200px;
	height:100%;
	/*background-color:#aaa;*/
	margin:0 auto;
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}
.box div{
	width:16%;
	height:250px;
	margin-bottom:15px;
	padding:10px;
	background-color:#fefefe;
	border:solid 1px #fbfbfb;
	box-sizing:border-box;
	text-align:center;
	font-size:12px;
	overflow:hidden;	
	transition:all .3s ease;
}
.box div:hover{
	transform:translateY(-10px);
	box-shadow:0 3px 5px #888;
}
.box div img{
	width:100%;
	height:200px;
	margin-bottom:5px;
}
.box div a{
	display:block;
	width:170px;
	height:16px;
	overflow:hidden;
	line-height:16px;
	text-decoration:none;
	margin:0 auto;
}
.box div a:hover{
	color:#cfb53b;
}
footer{
	height:75px;
}

@media all and (max-width:679px){
	.zw{
		height:50px;
	}
	.zwbackground{
		height:45px;
	}
	.theNav{
		width:100%;
		height:40px;
		margin:2.5px auto 0;
	}
	.theNav img{
		display:none;
	}
	.theNavUl{
		width:100%;
		height:40px;
		border-radius:80px;
		border:solid .5px #bbb;
		box-sizing:border-box;
		text-align:center;
		display:flex;
		list-style-type:none;
		justify-content:space-between;
	}
	.theNavUl li{
		width:19%;
		text-align:center;
	}
	.theNavUl a{
		width:100%;
		display:block;
		color:#333;
	}
	.box{
		width:100%;
		height:100%;
		margin:0 auto;
		display:flex;
		justify-content:space-between;
	}
	.box div{
		width:48%;
		height:250px;
		margin-bottom:10px;
		padding:20px;
		background-color:#efefef;
		border:solid 1px #dedede;
		box-sizing:border-box;
		text-align:center;
		/*line-height:400px;*/
		font-size:12px;
		overflow:hidden;	
	}
	.box div a{
		display:block;
		width:70%;
		height:16px;
		text-align:center;
		overflow:hidden;
		line-height:16px;
		text-decoration:none;
		margin:0 auto;
	}
	footer{
		height:50px;
	}
}

@media all and (min-width:680px) and (max-width:1120px){
	.zw{
		height:60px;
	}
	.zwbackground{
		height:55px;
	}
	.theNav{
		width:100%;
		height:50px;
		margin:2.5px auto 0;
	}
	.theNav img{
		width:20%;
		height:98%;
	}
	.theNavUl{
		width:80%;
		height:50px;
		border-radius:80px;
		border:solid .5px #bbb;
		box-sizing:border-box;
		text-align:center;
		display:flex;
		list-style-type:none;
		justify-content:space-between;
	}
	.theNavUl li{
		width:19%;
	}
	.theNavUl a{
		width:100%;
		display:block;
	}
	.box{
		width:100%;
		height:100%;
		margin:0 auto;
		display:flex;
		justify-content:space-between;
	}
	.box div{
		width:24%;
		height:250px;
		margin-bottom:10px;
		padding:20px;
		background-color:#efefef;
		border:solid 1px #dedede;
		box-sizing:border-box;
		text-align:center;
		/*line-height:400px;*/
		font-size:12px;
		overflow:hidden;	
	}
	.box div a{
		display:block;
		width:70%;
		height:16px;
		text-align:center;
		overflow:hidden;
		line-height:16px;
		text-decoration:none;
		margin:0 auto;
	}
	footer{
		height:60px;
	}
}